<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>爱公交app管理平台</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }
    </style>
    <link rel="stylesheet" href="../static/css/index.css">
</head>

<body>
<div id="getannouncement" d="{{ back_data }}">

</div>
    <div id="app">
        <el-container>
            <el-aside width="200px" >
                <el-menu :default-openeds="['5']">
                    <el-submenu index="1">
                       <template slot="title"><i class="el-icon-message"></i>用户管理</template>
                         <el-menu-item-group>
                             <el-menu-item index="2-1"><a href='main1'>用户列表</a> </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>日志管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1"><a href='log'>系统日志</a> </el-menu-item>
                            <el-menu-item index="2-2"><a href='feedback'>反馈信息</a> </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-setting"></i>路线及公交观测</template>
                         <el-menu-item-group>
                            <el-menu-item index="2-1"><a href='roadbus'>系统观测</a> </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title"><i class="el-icon-menu"></i>公交车次管理</template>
                         <el-menu-item-group>
                            <el-menu-item index="2-1"><a href='bustime'>车次信息</a> </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title"><i class="el-icon-menu"></i>公告管理</template>
                         <el-menu-item-group>
                            <el-menu-item index="2-1"><a href='announcement'>公告发布</a> </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 20px">
                    <span style="text-align: left; font-size: 20px">公告管理</span>
                    <el-dropdown style="text-align: right; font-size: 20px">
                        <i class="el-icon-setting" style="margin-right: 20px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>我的信息</el-dropdown-item>
                            <el-dropdown-item>管理员们</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span style="text-align: right; font-size: 20px">王小虎</span>
                </el-header>

                <el-main>
                    <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" height="600" style="width: 100%">
                        <el-table-column label="Date" prop="date">

                        </el-table-column>
                        <el-table-column label="Name" prop="name">

                        </el-table-column>
                        <el-table-column align="right">
                            <template slot="header" slot-scope="scope">
                                <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
                            </template>
                            <template slot-scope="scope">
                                <el-button size="mini" @click="dialog = true">edit</el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                                <el-drawer title="编辑公告" :before-close="handleClose" :visible.sync="dialog" direction="ltr" custom-class="demo-drawer" ref="drawer">
                                    <div class="demo-drawer__content">
                                        <div class="demo-drawer__footer">
                                            <el-row>
                                                <el-input type="textarea" :autosize="{ minRows: 15, maxRows: 25}" placeholder="请编辑内容" v-model="textarea" maxlength="500"  show-word-limit>
                                                </el-input>
                                            </el-row>
                                            <el-row :gutter="60">
                                                <el-col :span="4":offset="15">
                                                     <el-button @click="cancelForm">取 消</el-button>
                                                </el-col>
                                                <el-col :span="4">
                                                    <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">确定</el-button>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                </el-drawer>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
                <el-divider><i class="el-icon-edit-outline"></i></el-divider>
                <el-footer>
                    <el-row>
                        <el-input type="textarea" :autosize="{ minRows: 6}" placeholder="请输入内容" v-model="announcement" maxlength="500" minlength="1" show-word-limit>
                        </el-input>
                    </el-row>
                    <el-row :gutter="1">
                        <el-col :span="1":offset="22">
                            <el-tooltip class="item" effect="dark" content="提交" placement="top">
                                <el-button type="primary" icon="el-icon-upload" @click="upload_confirm">
                                </el-button>
                            </el-tooltip>
                        </el-col>
                        <el-col :span="1">
                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                <el-button type="primary" icon="el-icon-delete" @click="clear_confirm">
                                </el-button>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                </el-footer>
            </el-container>

        </el-container>

    </div>
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

    <script>
        var data= document.getElementById('getannouncement').getAttribute('d');
        {#dataJson=JSON.parse(data);#}
        console.log(data);
        console.log(typeof data);
        function separate() {
            var temp=data.split(">, <");
            var count=0;
            console.log(temp);
        }
        var Main = {
            data() {
                return {
                    dialog: false,
                    loading: false,
                    tableData: [{
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }],
                    search: ''
                    ,announcement:''
                    ,textarea:''
                }
                },
            methods: {
                    handleClose(done) {
                        if (this.loading) {
                            return;
                        }
                        this.$confirm('确定要提交表单吗？')
                            .then(_ => {
                                this.loading = true;
                                this.timer = setTimeout(() => {
                                    done();// 动画关闭需要一定的时间
                                    setTimeout(() => {
                                        this.loading = false;
                                        }, 400);
                                    }, 2000);
                            })
                            .catch(_ => {});
                        },
                    cancelForm() {
                        this.loading = false;
                        this.dialog = false;
                        clearTimeout(this.timer);
                    },

                {#handleEdit(index, row) {#}
                {#    console.log(index, row);#}
                {#    },#}

                handleDelete(index, row) {
                    console.log(index, row);
                },

                upload_confirm() {
                    this.$confirm('确认上传公告?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        console.log(this.announcement),
                        axios.post('/announcement',this.announcement)
                        .then(function (response) {
                           console.log(response)
                        })
                        .catch(function (error) {
                           console.log(error);
                        })
                        this.$message({
                            type: 'success',
                            message: '上传成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消上传'
                        });
                    });
                },
                clear_confirm() {
                    this.$confirm('确认清空公告?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.announcement='',
                        this.$message({
                            type: 'success',
                            message: '清空成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消清空'
                        });
                    });
                }
                },
        }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

    </script>
    <style scoped>
        .el-row {
            margin-bottom: 10px;
        }
        .el-col {
            border-radius: 4px;
        }

        .el-header {
            height: 60px;
            font-size: 20px;
            line-height: 60px;
            color: #333;
            background-color: #b3c0d1;
        }

        .el-container {
            height: 100% ;
        }

        .el-aside {
            height: 100vh;
        }

        .el-menu {
            background: #b3c0d1;;
            height: 100%;
        }
        .el-button+.el-button {
            margin-left: 2px;
        }
    </style>
</body>

</html>